﻿<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>会员名册系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- site favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png" />
    <!-- Place favicon.ico in the root directory -->

    <!-- All stylesheet and icons css  -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/animate.css" />
    <link rel="stylesheet" href="assets/css/all.min.css" />
    <link rel="stylesheet" href="assets/css/swiper.min.css" />
    <link rel="stylesheet" href="assets/css/lightcase.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <style>
      .default-btn {
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <!-- ================> Page Header section start here <================== -->
    <div
      class="pageheader bg_img"
      style="background-image: url(assets/images/bg-img/pageheader.jpg)"
    >
      <div class="container">
        <div class="pageheader__content text-center">
          <h2>用户对比</h2>
        </div>
      </div>
    </div>
    <!-- ================> Page Header section end here <================== -->

    <!-- ================> Membership start here <================== -->
    <div class="membership padding-top padding-bottom">
      <div class="container">
        <div class="section__wrapper">
          <div
            class="row g-4 justify-content-center row-cols-xl-4 row-cols-lg-3 row-cols-sm-2 row-cols-1"
          ></div>
        </div>
      </div>
    </div>
    <!-- ================> Membership end here <================== -->
    <!-- All Needed JS -->
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <!-- <script src="assets/js/all.min.js"></script> -->
    <script src="assets/js/wow.js"></script>
    <script src="assets/js/counterup.js"></script>
    <script src="assets/js/jquery.countdown.min.js"></script>
    <script src="assets/js/lightcase.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/request.js"></script>
    <script>
      let ids = JSON.parse(localStorage.getItem("ids") || "[]");
      if (ids.length < 1) {
        alert("请选择用户进行对比");
        history.back();
      }
      const list = {
        年龄: "nianling",
        性别: "xingbie",
        生日: "shengri",
        身高: "shengao",
        体重: "weight",
        职业: "job",
        工作单位: "company",
        收入: "shouru",
        婚姻状态: "hunyin",
        居住情况: "juzhu",
        房产情况: "fangchan",
        是否有车: "youche",
        教育情况: "jiaoyu",
        留学经历: "liuxue",
      };
      function getData() {
        request("/api/pad/UserInfo/getByIds", {
          type: "post",
          data: {
            ids,
          },
        })
          .then((res) => {
            if (res.code === 200) {
              const data = res.data;
              console.log(data);
              $(".justify-content-center").html(
                data
                  .map((e, i) => {
                    const dom = Object.keys(list)
                      .map((el) => {
                        return `<li>
                        <span>${el}: ${e[list[el]] || "~~~"}</span>
                      </li>`;
                      })
                      .join("");
                    return `<div class="col">
              <div class="membership__item">
                <div class="membership__inner">
                  <div class="membership__head">
                    <h4>${e.nicheng}</h4>
                  </div>
                  <div class="membership__body">
                    <ul>
                ${dom}
                   
                    </ul>
                  </div>
                  <div class="membership__footer">
                    <a class="default-btn reverse del" index=${i} ><span  >删除</span></a>
                  </div>
                </div>
              </div>
            </div>
          </div>`;
                  })
                  .join("")
              );
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
      getData();
      $(".justify-content-center").on("click", ".del", function () {
        const index = Number($(this).attr("index"));
        ids.splice(index, 1);
        localStorage.setItem("ids", JSON.stringify(ids));
        if (ids.length < 1) {
          history.back();
          return;
        }
        getData();
      });
    </script>
  </body>
</html>
